<template>
  <div class="transfer-statistics">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap">
        <el-form ref="formRef" :model="params" label-width="auto">
          <el-row :gutter="120">
            <el-col :span="5">
              <el-form-item label="行政区划：">
                <el-tree-select
                  v-model="params.district"
                  :data="adminAreaList"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="废物类别：">
                <el-select
                  v-model="params.wastetype"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in wasteList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="开始日期：">
                <el-date-picker
                  v-model="params.startdate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              /></el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="结束日期：">
                <el-date-picker
                  v-model="params.enddate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              /></el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" @click="getList"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Search /></el-icon
                  >查询</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="main-waste">
      <div class="line-chart">
        <div class="hazardous-wastes-num">
          <div class="hazardous-wastes-num-title">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            危废市内转移量/转移次数
          </div>
          <div class="chart-wrap">
            <div class="data-name">
              <div class="left">
                <div class="circle"></div>
                <div>市内转移总次数&nbsp;<span>{{lineData.num_times_sum}}</span>&nbsp;&nbsp;次</div>
              </div>
              <div class="right">
                <div class="circle"></div>
                <div>市内转移总量&nbsp;<span>{{lineData.num_waste_sum}}</span>&nbsp;吨</div>
              </div>
            </div>
            <WasteTransferNumChrat :lineData="lineData"/>
          </div>
        </div>
        <div class="city-wastes-num"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import WasteTransferNumChrat from "./wasteTransferNumChrat";
import http from "@http";
import ElMessage from '@msg'
import changeArea from "@/utils/changeArea";
let params = reactive({});
let adminAreaList = ref([]);
let wasteList = ref([]);
let form = reactive({});
let lineData = ref([])
let handleSearch = () => {};
let getList = () => {
  http({ url: "/admPCGraphWasteTransfer/getGraphData", data: params }).then(
    (res) => {
      if(res.code==0){
        lineData.value =res.data
        ElMessage({msg:'查询成功'})
      }
    }
  );
};
getList()
http({ url: "/region/datalisttree" }).then((res) => {
  console.log(res, "res");
  if (res.code == 0) {
    adminAreaList.value = changeArea(res.data);
  }
});
http({ url: "/listitem/getmodule", data: { module: "B03" } }).then((res) => {
  if (res.code == 0) {
    wasteList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
</script>
<style lang="scss" scoped>
.transfer-statistics {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .title-wrap {
    height: 140px;
    background: #ffffff;
    padding-top: 20px;

    .search-wrap {
      margin-top: 30px;
      padding-left: 20px;

      :deep(.el-input) {
        width: 220px !important;
      }
    }
  }

  .main-waste {
    width: 100%;
    margin-top: 0.2vh;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    .line-chart {
      margin-top: 0.7vh;
      display: flex;
      justify-content: space-between;
      .hazardous-wastes-num {
        /* margin-top: 0.5vh; */
        height: 50vh;
        width: 881px;
        background-color: #fff;
        padding-top: 18px;
        padding-left: 18px;
        .chart-wrap {
          position: relative;
          .data-name {
            display: flex;
            align-items: center;
            top: 3px;
            left: 140px;
            position: absolute;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            color: #333333;

            .left,
            .right {
              display: flex;
              align-items: center;
              .circle {
                width: 10px;
                height: 10px;
                background: #0874fa;
                border-radius: 50%;
                margin-right: 5px;
              }
              div {
                display: flex;
                align-items: center;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 18px;
                color: #333333;
                span {
                  font-family: SeoulNamsan EB;
                  font-weight: 400;
                  font-size: 25px;
                  color: #333333;
                }
              }
            }
            .right {
              margin-left: 40px;
              .circle {
                background: #f3c304 !important;
              }
            }
          }
        }
        .content-wrap {
          display: flex;
          justify-content: space-between;

          padding-right: 45px;
          .left-pie {
            width: 450px;
          }
          .data-list {
            padding-top: 15px;
            border-radius: 10px;
            width: 232px;
            ul {
              display: flex;
              flex-direction: column;
            }
            ul > li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 20px;
              .order {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #333333;
              }
              .name {
                width: 50px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #a3bad0;
                margin-left: 10px;
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .val {
                width: 90px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .proportion {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 17px;
                color: #333333;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            h3 {
              padding: 5px 0;
              border-radius: 10px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 17px;
              color: #0874fa;
              background-color: #cee3fe;
              text-align: center;
            }
          }
        }
        .hazardous-wastes-num-title {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          color: #000000;
          img {
            width: 27px;
            height: 20px;
          }
        }
      }
      .city-wastes-num {
        height: 50vh;

        padding-top: 18px;
        padding-left: 18px;
        /* background-color: #fff; */
      }
    }
  }
}
</style>
